<#assign treeid=auth.getuuid()>
<#assign treedetailid=auth.getuuid()>
<#assign treedetailroleid=auth.getuuid()>
<#assign ztreedetailrolegrid=auth.getuuid()>
<#assign textid=auth.getuuid()>
<#assign urlid=auth.getuuid()>
<#assign idid=auth.getuuid()>
<#assign systemid=auth.getuuid()>
<script type="text/javascript">
 $(function(){ 
	var $panel = $.CurrentNavtab;
	var $t     = $('#${treeid}');
	var op     = $t.data();
	//添加删除按钮INIT
	var add    = op.addHoverDom ? null : 'edit';
	var remove = op.removeHoverDom ? null : 'edit';
	var onremove = op.onRemove ? '' : 'M_NodeRemove';
	$t.data('addHoverDom', add).data('removeHoverDom', remove).data("onRemove",onremove);
	//拖动INIT
	var edit   = op.editEnable ? true : true,
        bDrag  = op.beforeDrag ? '' : 'M_BeforeNodeDrag',
        bDrop  = op.beforeDrop ? '' : 'M_BeforeNodeDrop',
        onDrop = op.onDrop ? '' : 'M_NodeDrop';
            
    $t.data('editEnable', edit).data('beforeDrag', bDrag).data('beforeDrop', bDrop).data('onDrop', onDrop);
}); 
//单击事件
function ZtreeClick(event, treeId, treeNode) {
    var $detail = $('#${treedetailid}');
    var $detaidrole = $('#${treedetailroleid}');
    if ($detail.attr('tid') == treeNode.tId){
    	return;
    }
	if (treeNode.name) {
		$('#${textid}').val(treeNode.name);
	}else{
		$('#${textid}').val('');
	}
	if (treeNode.tsurl) {
		$('#${urlid}').val(treeNode.tsurl);
	} else {
		$('#${urlid}').val('');
	}
	if (treeNode.tsid) {
		$('#${idid}').val(treeNode.tsid);
	} else {
		$('#${idid}').val('');
	}
	if (treeNode.tssystem) {
		$('#${systemid}').val(treeNode.tssystem);
	} else {
		$('#${systemid}').val('');
	}
	
	$detail.attr('tid', treeNode.tId);
    $detail.show();
    
    $detaidrole.attr('tid', treeNode.tId);
    $detaidrole.show();
    if(treeNode.tsid == null||treeNode.tsid==""){
    	$('#${ztreedetailrolegrid}').html("");
    }else{
    	$('#${treeid}').bjuiajax('doLoad', {url:"${rootpath}/System/menu_getrole?id="+treeNode.tsid, target:"#${ztreedetailrolegrid}"})
    }
    
}
//保存属性
function M_Ts_Menu() {
	var zTree  = $.fn.zTree.getZTreeObj("${treeid}");
	var tstext   = $('#${textid}').val();
	var tsurl    = $('#${urlid}').val();
	var tsid	 = $('#${idid}').val();
	var tssystem = $('#${systemid}').val();

	
	
	if ($.trim(tstext).length == 0) {
		alertMsg.error('菜单名称不能为空！');
		return;
	}
	var upNode = zTree.getSelectedNodes()[0];
	
	if (!upNode) {
		alertMsg.error('未选中任何菜单！');
        return;
	}
	upNode.name   = tstext;
	upNode.tstext = tstext;
	upNode.tsurl   = tsurl;
	upNode.tsid 	= tsid;
	upNode.tssystem = tssystem;
	zTree.updateNode(upNode);
}
//监听拖拽事件
function M_BeforeNodeDrag(treeId, treeNodes) {
    return true
}
function M_BeforeNodeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {
    /*禁止插入层级为2的节点*/
    if (moveType == 'inner' && targetNode.level == 4) {
    	$("#${treeid}").alertmsg('info', '拖拽失败。原因：目录菜单只能有4层！');
        return false
    }
    /*禁止插入剩余层级不足的子节点*/
    if (moveType == 'inner' && treeNodes[0].isParent) {
        var molevel = 4 - targetNode.level //剩余层级
        var maxlevel = 1
        var zTree = $.fn.zTree.getZTreeObj("ztree1")
        var nodes = zTree.transformToArray(treeNodes)
        var level = nodes[0].level
        
        for (var i = 1; i < nodes.length; i++) {
            if (nodes[i].level == (level + 1)) {
                maxlevel++
                level++
            }
        }
        if (maxlevel > molevel) {
        	$("#${treeid}").alertmsg('info', '拖拽失败。原因：目录菜单只能有4层！');
            return false
        }
    }
    return true
}
//拖拽结束事件
function M_NodeDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
    
}
//删除结束事件
var menudeleteids = [];
function M_NodeRemove(event, treeId, treeNode) {
	if(treeNode.tsid!=null&&treeNode.tsid!=""){
		menudeleteids.push(treeNode.tsid);
	}
}

//保存菜单
function savemenu(){
	var zTree = $.fn.zTree.getZTreeObj("${treeid}")
    var menus = zTree.getNodes();
	
	$("#${treeid}").bjuiajax('doAjax', {url:"${rootpath}/System/menu_save", reload:true,confirmMsg:"是否确定需要保存？",data:{'menus':JSON.stringify(menus[0]),"deleteids":JSON.stringify(menudeleteids)}});
	menudeleteids = [];
}
</script>
<div class="bjui-pageContent">
    <div class="pageFormContent" data-layout-h="0">
        <div style="float:left; margin:5px 5px 0; width:400px;">
            <fieldset>
                <legend>树型菜单</legend>
                <#if auth.getauth(userid,"/System/menu_save")>
                <button class="btn btn-green" onclick="savemenu();">保存更新</button>
                </#if>
                <div class="alert alert-info form-inline"><i class="fa fa-info-circle"></i> 可拖拽菜单节点</div>
                <div class="clearfix">
                    <div style="float:left; width:400px; height:625px; overflow:auto;">
                        <ul id="${treeid}" class="ztree" data-toggle="ztree" data-max-add-level="4" data-expand-all="false" data-expand-level="2" data-on-click="ZtreeClick">
                            <!-- <li data-id="1" data-pid="0">表单元素</li>
                            <li data-id="10" data-pid="1" data-url="form-button.html" data-tabid="form-button">按钮</li> -->
                            <#list menulist as item>
                            	<#if item?exists>
                            		<li data-id="${item.id!}" data-pid="${item.pid!}" data-tsid="${item.id!}" data-tspid="${item.pid!}" data-tstext="${item.text!}" data-tssystem="${item.system!}" data-tsurl="${item.url!}">${item.text}</li>
                            	</#if>
                            </#list>
                        </ul>
                    </div>
                </div>
            </fieldset>
        </div>
        <!-- 明细编辑START -->
        <div id="${treedetailid}" style="display:none; margin-left:430px; margin-top:5px; width:600px; height:125px;">
        	<fieldset>
            <!-- <div class="bs-example" data-content="详细信息"> -->
            <legend>菜单详细信息</legend>
            	<div class="form-group">
                    <label for="${idid}" class="control-label x85">id：</label>
                    <input type="text" class="form-control" name="m.tsid" id="${idid}" size="15" placeholder="" readonly />
                    <label for="${systemid}" class="control-label x85">系统标识：</label>
                    <input type="text" class="form-control" name="m.tssystem" id="${systemid}" size="15" placeholder="" />
                    <div class="alert alert-info form-inline"><i class="fa fa-info-circle"></i> 操作请留空</div>
                </div>
                <div class="form-group">
                	<label for="${textid}" class="control-label x85">菜单名称：</label>
                    <input type="text" class="form-control validate[required] required" name="m.tstext" id="${textid}" size="30" placeholder="" />
                </div>
                <div class="form-group">
                    <label for="${urlid}" class="control-label x85">模块路径：</label>
                    <input type="text" class="form-control" name="m.tsurl" id="${urlid}" size="30" placeholder="" />
                    <#if auth.getauth(userid,"/System/menu_save")>
                    <button class="btn btn-green" onclick="M_Ts_Menu();">确认修改</button>
                    </#if>
                </div>
                <!-- <div class="form-group" style="padding-top:8px; border-top:1px #DDD solid;">
                    <label class="control-label x85"></label>
                    
                </div> -->
            <!-- </div> -->
            </fieldset>
        </div>
        <!-- 明细编辑END -->
        <!-- 角色权限START -->
        <div id="${treedetailroleid}" style="display:none; margin-left:430px; margin-top:5px; width:600px; height:520px; ">
        	<fieldset>
            <!-- <div class="bs-example" data-content="详细信息"> -->
            <legend>菜单角色权限</legend>
            	<div id="${ztreedetailrolegrid}" class="bjui-layout" style="width:600px;height:520px;overflow:auto;">
            	
                </div>
            </fieldset>
        </div>
        <!-- 角色权限END -->
    </div>
</div>